<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-综合案例</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="app">
    <!--操作行-->
    <el-row type="flex" justify="left">
        <el-col :span="4">
            <el-button type="primary" icon="el-icon-plus" @click="showAddUserPage">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="DeleteMultipleRow">批量删除</el-button>
        </el-col>
        <el-col :span="6">
            <el-input name="searchKeyWords" type="text" placeholder="请输入搜索的关键字" v-model="searchKeyWords">
                <el-select slot="prepend" v-model="searchType">
                    <el-option name="searchType" label="编号" value="1"></el-option>
                    <el-option name="searchType" label="姓名" value="2"></el-option>
                    <el-option name="searchType" label="地址" value="3"></el-option>
                </el-select>
                <el-button type="info" icon="el-icon-search" slot="append" @click="searchBtn">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
    <p></p>
    <!--表格展示-->
    <el-table border :data="userListData" @select-all="selectAll" @select="selectOne">
        <!--表格前两列-->
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="编号" type="index" align="center"></el-table-column>
        <!--表格数据列-->
        <el-table-column label="主键" align="center" prop="id"></el-table-column>
        <el-table-column label="姓名" align="center" prop="username"></el-table-column>
        <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"></el-table-column>
        <el-table-column label="生日" align="center" prop="birthday"></el-table-column>
        <el-table-column label="电话" align="center" prop="telephone"></el-table-column>
        <el-table-column label="职位" align="center" prop="job" :formatter="jobFormat"></el-table-column>
        <el-table-column label="薪资" align="center" prop="salary"></el-table-column>
        <el-table-column label="住址" align="center" prop="address"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark"></el-table-column>
        <!--表格操作行-->
        <el-table-column label="操作" align="center">
            <div slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteOneRow(scope)">删除</el-button>
                <el-button type="warning" icon="el-icon-edit" size="mini" @click="editUserForm(scope)">编辑</el-button>
            </div>
        </el-table-column>
    </el-table>

    <!--弹框-->
    <!--添加用户信息弹框-->
    <el-dialog :visible.sync="addUserFlag" title="添加用户信息" @close="resetAddForm()">
        <el-form :model="addUserObj" :rules="ruleReg" ref="addForm">
            <!--姓名-->
            <el-form-item label="姓名" label-width="70px" prop="username">
                <el-input name="username" type="text" prefix-icon="el-icon-user" placeholder="请输入姓名"
                          v-model="addUserObj.username"></el-input>
            </el-form-item>
            <!--性别-->
            <el-form-item label="性别" label-width="70px">
                <el-radio-group v-model="addUserObj.sex">
                    <el-radio name="sex" label="1">男</el-radio>
                    <el-radio name="sex" label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--生日-->
            <el-form-item label="生日" label-width="70px">
                <el-date-picker name="birthday" v-model="addUserObj.birthday"></el-date-picker>
            </el-form-item>
            <!--电话-->
            <el-form-item label="电话" label-width="70px" prop="telephone">
                <el-input name="telephone" type="text" prefix-icon="el-icon-phone" placeholder="请输入电话"
                          v-model="addUserObj.telephone"></el-input>
            </el-form-item>
            <!--职位-->
            <el-form-item label="职位" label-width="70px">
                <el-select v-model="addUserObj.job">
                    <el-option name="job" label="攻城狮" value="1"></el-option>
                    <el-option name="job" label="程序猿" value="2"></el-option>
                    <el-option name="job" label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>
            <!--薪资-->
            <el-form-item label="薪资" label-width="70px">
                <el-input name="salary" type="text" prefix-icon="el-icon-money" placeholder="请输入薪资"
                          v-model="addUserObj.salary"></el-input>
            </el-form-item>
            <!--地址-->
            <el-form-item label="地址" label-width="70px" prop="address">
                <el-input name="address" type="text" prefix-icon="el-icon-location-outline" placeholder="请输入地址"
                          v-model="addUserObj.address"></el-input>
            </el-form-item>
            <!--备注-->
            <el-form-item label="备注" label-width="70px">
                <el-input name="remark" type="text" prefix-icon="el-icon-location-message" placeholder="请输入备注"
                          v-model="addUserObj.remark"></el-input>
            </el-form-item>
            <!--确认和取消按钮-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="4">
                        <el-button type="success" icon="el-icon-check" @click="submitAddForm">确定</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="danger" icon="el-icon-close" @click="resetAddForm">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--编辑用户信息弹框-->
    <el-dialog :visible.sync="editUserFlag" title="编辑用户信息" @close="resetEditForm()">
        <el-form :model="editUserObj" :rules="ruleReg" ref="editForm">
            <!--姓名-->
            <el-form-item label="姓名" label-width="70px" prop="username">
                <el-input name="username" type="text" prefix-icon="el-icon-user" placeholder="请输入姓名"
                          v-model="editUserObj.username"></el-input>
            </el-form-item>
            <!--性别-->
            <el-form-item label="性别" label-width="70px">
                <el-radio-group v-model="editUserObj.sex">
                    <el-radio name="sex" label="1">男</el-radio>
                    <el-radio name="sex" label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--生日-->
            <el-form-item label="生日" label-width="70px">
                <el-date-picker name="birthday" v-model="editUserObj.birthday"></el-date-picker>
            </el-form-item>
            <!--电话-->
            <el-form-item label="电话" label-width="70px" prop="telephone">
                <el-input name="telephone" type="text" prefix-icon="el-icon-phone" placeholder="请输入电话"
                          v-model="editUserObj.telephone"></el-input>
            </el-form-item>
            <!--职位-->
            <el-form-item label="职位" label-width="70px">
                <el-select v-model="editUserObj.job">
                    <el-option name="job" label="攻城狮" value="1"></el-option>
                    <el-option name="job" label="程序猿" value="2"></el-option>
                    <el-option name="job" label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>
            <!--薪资-->
            <el-form-item label="薪资" label-width="70px">
                <el-input name="salary" type="text" prefix-icon="el-icon-money" placeholder="请输入薪资"
                          v-model="editUserObj.salary"></el-input>
            </el-form-item>
            <!--地址-->
            <el-form-item label="地址" label-width="70px" prop="address">
                <el-input name="address" type="text" prefix-icon="el-icon-location-outline" placeholder="请输入地址"
                          v-model="editUserObj.address"></el-input>
            </el-form-item>
            <!--备注-->
            <el-form-item label="备注" label-width="70px">
                <el-input name="remark" type="text" prefix-icon="el-icon-location-message" placeholder="请输入备注"
                          v-model="editUserObj.remark"></el-input>
            </el-form-item>
            <!--确认和取消按钮-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="4">
                        <el-button type="success" icon="el-icon-check" @click="submitEditForm">确定</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="danger" icon="el-icon-close" @click="resetEditForm">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="../js/23-综合案例.js"></script>
</body>
</html>